<template>
    <div>
        <div class="header">
        <div class="container">
           <div class="left">km数码商城</div>
           <div class="right">
            <span>账号：{{userInfo.account}} </span>
            <span ><router-link class="go" to="/userlogin">切换账号</router-link></span>
            <span @click="goshop" class="go"> 商城中心</span>
            <span ><router-link class="go" to="/"> 后台管理</router-link></span>
           </div>
        </div>

      </div>
        <div class="container">
            <div class="myorder"> 我的订单</div>
            <el-table :data="userOrders" border style="width: 100%" stripe height="500px">   
                <el-table-column prop="id" label="订单号" width="100" />
                <el-table-column prop="items" label="商品名称" width="150" />
                <el-table-column prop="amount" label="商品价格" width="100" />
                <el-table-column prop="number" label="商品数量" width="100" />
                <el-table-column prop="username" label="收货人" width="180" />
                <el-table-column prop="phone" label="联系电话" width="180" />
                <el-table-column prop="address" label="收货地址" width="180" />
                <el-table-column label="操作">
                <template #default="scope">
                    <!-- <el-button size="small" @click="editItems(scope.row.id)">编辑</el-button> -->
                    <el-popconfirm title="是否确认取消订单?" @confirm="removeOrder(scope.row.id)" >
                        <template #reference>
                            <el-button type="danger">取消订单</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
            </el-table>
        </div>      
    </div>
</template>
<script>
    export default{
        data(){
            return{
                userInfo:'',
                userOrders:''

            }
        },
        mounted(){
            this.getUserOrders()     
        },
        methods:{
            async getUserOrders(){
                const result=await this.$http.get('/user/findid',{params:{id:this.$route.params.id}})
                this.userInfo=result[0]
                this.userOrders=result[0].orders
                console.log(result[0]);
            },
            // 删除订单
            async removeOrder(id){
             await this.$http.delete('/order/del',{params:{id:id}})
             this.$message.success("取消订单成功")
                this.getUserOrders()
            }, 
            goshop(){
                this.$router.push(`/shop/${this.userInfo.id}`)
            }           
        }
    }
</script>
<style scoped>
    .container{
        width: 1226px;
        margin: 0 auto;
    }
    .header{
    width: 100%;
    height: 50px;
    background-color:#333;
    line-height: 50px;
    color:#b0b0b0;
}
.header .left{
    float: left;
}
.header .right{
    font-size: 14px;
    float: right;
}
.header .right span{
  margin-left: 10px;
}
.header .right .go:hover{
  color: #fff;
}
.header .right a{
  color: #b0b0b0;
}
.myorder{
    margin-top: 10px;
    height: 30px;
    background-color: #b0b0b0;
    padding-left: 10px;
    line-height: 30px;
}
</style>